<template>
  <a-layout id="components-layout-demo-responsive">
    <a-layout>
        欢迎--{{username}}--来到
          <table border="1px" width="500px">
            <tr>
              <th>用户名</th>
              <th>手机号</th>
              <th>邮箱</th>
            </tr>
            <tr  v-for="user in user_li" :key="user.id">
              <td>{{user.username}}</td>
              <td>{{user.phone}}</td>
              <td>{{user.email}}</td>
              
            </tr>
          </table>
      <a-layout-footer style="textAlign: center">
        Ant Design ©2018 Created by Ant UED

      </a-layout-footer>
    </a-layout>

  </a-layout>

</template>

<script>
  export default {
    data(){
      return{
        visible: false,
        user_li:'',
        username:"",
        email:'',
        phone:"",
        username:sessionStorage.getItem('username')
      }
    },
    methods: {
      user_get(){
        this.$axios.get('http://127.0.0.1:8000/user/')
        .then(res=>{
          console.log(res.data)
          this.user_li = res.data
        })
      },
    },
    created() {
      this.user_get()
    }
  };
</script>

<style>
#components-layout-demo-responsive .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
</style>